<template>
  <view class="new_main">
    <view class="header flex_between">
      <view
        class="tab flex_center_align"
        :class="{ select_tab: selectIndex == index }"
        v-for="(item, index) in tabList"
        :key="index"
        @click="menuClick(item, index)"
      >
        {{ item.name }}
      </view>
    </view>
    <template v-if="couponList.length > 0">
      <view class="content">
        <view class="list" v-for="(item, index) in couponList" :key="index">
          <view class="flex_between" v-if="item.status != 2">
            <view
              class="left flex_column cff4"
              :class="{ ffc: item.status == 1 }"
            >
              <view v-if="item.num_text == 0" class="fz48 bold">免单</view>
              <view v-else class="fz48 bold">{{ item.num_text }}折</view>
              <view class="fz32 fw700">优惠券</view>
            </view>
            <view class="middle" :class="{ c999: item.status == 1 }">
              <view
                v-if="item.num_text == 0 && item.type == 1"
                class="fz36 fw700"
                >普通问答券
              </view>
              <view
                v-if="item.num_text == 0 && item.type == 2"
                class="fz36 fw700"
                >专家问答券
              </view>
              <view v-if="item.num_text != 0" class="fz36 fw700"
                >问答{{ item.num_text }}折券
              </view>
              <view
                class="time"
                :class="{ cff4: item.isToday && item.status != 1 }"
              >
                {{ item.endtime_text }} 到期
              </view>
              <view
                class="rules flex c999"
                :class="{ cccc: item.status == 1 }"
                @click="showRules = true"
              >
                使用规则<u-icon
                  class="arrow"
                  name="arrow-down"
                  size="12"
                ></u-icon>
              </view>
            </view>
            <image
              class="right_img"
              v-if="item.status == 1"
              src="/static/img/my/coupon/use_icon.png"
              mode="widthFix"
            >
            </image>
            <view
              v-if="item.status == 0"
              class="right_use flex_center_align"
              @click="goUse(item)"
              >去使用
            </view>
          </view>

          <!-- 已过期优惠券 -->
          <view v-if="item.status == 2" class="flex_between cd1d">
            <view class="left flex_column">
              <view v-if="item.num_text == 0" class="fz48 bold">免单</view>
              <view v-else class="fz48 bold">{{ item.num_text }}折</view>
              <view class="fz32 fw700">优惠券</view>
            </view>
            <view class="middle">
              <view v-if="item.num_text == 0" class="fz36 fw700"
                >问答免费券</view
              >
              <view v-else class="fz36 fw700">问答{{ item.num_text }}折券</view>
              <view class="time"> {{ item.endtime_text }} 到期 </view>
              <view class="rules flex cd1d">
                使用规则<u-icon
                  class="arrow"
                  name="arrow-down"
                  size="12"
                ></u-icon>
              </view>
            </view>
            <image
              class="right_img"
              src="/static/img/my/coupon/past_due_icon.png"
              mode="widthFix"
            >
            </image>
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <u-empty
        mode="data"
        text="暂无优惠券"
        icon="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
      ></u-empty>
    </template>

    <u-popup
      class="showRules"
      :show="showRules"
      :round="15"
      :closeOnClickOverlay="true"
      mode="center"
      :customStyle="customStyle1"
      @close="showRules = false"
    >
      <view class="fz40 mb40"> 使用规则 </view>
      <view class="c666" v-html="rule"></view>
    </u-popup>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pages/my/coupon/index"
></script>

<style lang="scss">
.new_main {
  background: #f6f6f6;
  min-height: 100vh;

  .header {
    margin-bottom: 60rpx;
    padding: 60rpx 20rpx;
    width: 100%;
    height: 62rpx;

    .tab {
      width: 216rpx;
      height: 62rpx;
      background: #e7e7e7;
      border-radius: 55rpx;
    }

    .select_tab {
      background: #ff6161;
      color: #f4f8fb;
    }
  }

  .content {
    padding: 0 30rpx;

    .list {
      padding: 40rpx;
      margin-top: 20rpx;
      width: 690rpx;
      height: 213rpx;
      background: #fff;
      border-radius: 22rpx;

      .right_use {
        width: 152rpx;
        height: 58rpx;
        background: #ff6161;
        border-radius: 55px;
        color: #f4f8fb;
      }

      .right_img {
        width: 110rpx;
        height: 110rpx;
      }

      .left {
        align-items: center;
      }

      .middle {
        .time {
          margin: 10rpx 0;
        }

        .arrow {
          margin-left: 20rpx;
        }
      }
    }
  }
}

/deep/ .u-icon--right {
  margin-top: 10rpx;
  margin-left: 10rpx;
}
</style>
